<template>
  <div class="m-block-info">
    <h3>{{$t('blockDetail.general')}}</h3>
    <div class="infos table-shadow">
      <div class="line flex-left">
        <img src="../../../assets/img/tip/red.png" />
        <label>{{$t('block.title')}}</label>
        <span>{{infos.height}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/blue.png" />
        <label>{{$t('block.txCount')}}</label>
        <span>{{infos.txCount}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/green.png" />
        <label>{{$t('blockDetail.last')}}</label>
        <span
          class="light block-jump"
          @click="jump(infos.height-1)"
        >{{infos.height - 1>=0? infos.height - 1:$t('blockDetail.nodata')}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/red.png" />
        <label>{{$t('blockDetail.next')}}</label>
        <span
          class="light block-jump"
          @click="jump(infos.height+1)"
        >{{$store.state.maxHeight >= infos.height + 1? infos.height +1 :$t('blockDetail.nodata')}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/blue.png" />
        <label>{{$t('trade.time')}} (UTC+8)</label>
        <span>{{infos.blockTime|caculateTime}}</span>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/pink.png" />
        <label>{{$t('blockDetail.mock')}}</label>
        <span>{{infos.txHash|filterHash(12)}}</span>
        <i
          class="iconfont iconfuzhi"
          v-clipboard:copy="infos.txHash"
          v-clipboard:success="success"
          v-clipboard:error="error"
        ></i>
      </div>
      <div class="line flex-left">
        <img src="../../../assets/img/tip/green.png" />
        <label>{{$t('blockDetail.statusHash')}}</label>
        <span>{{infos.stateHash|filterHash(12)}}</span>
        <i
          class="iconfont iconfuzhi"
          v-clipboard:copy="infos.stateHash"
          v-clipboard:success="success"
          v-clipboard:error="error"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infos: {
      type: Object,
      default: () => {
        return {
          txCount: 0,
          height: 0,
          txHash: "",
          blockTime: "",
          stateHash: ""
        };
      }
    }
  },
  methods: {
    jump(height) {
      console.log(height, this.$store.state.maxHeight);
      if (height < 0 || height > this.$store.state.maxHeight) return;
      else
        this.$router.push({
          path: "/blockdetail",
          query: { height: height }
        });
    },
    success() {
      this.$message.success(this.$t("components.copySuc"));
    },
    error() {
      this.$message.warning(this.$t("components.copyErr"));
    }
  }
};
</script>

<style lang="scss" scoped>
.m-block-info {
  margin-top: 20px;
  h3 {
    color: $black;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
  }
  .infos {
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    font-size: 12px;
    color: $black;
    .line {
      height: 38px;
      label {
        width: 105px;
        margin-left: 9px;
      }
      i {
        color: $blue;
        margin-left: 15px;
      }
    }
  }
}
</style>